<template>
	<div>
		<el-input
      v-model='mineStatus'
			placeholder="请选择"
			style="width: 100%"
			:suffix-icon="Search"
			@click="openDialog"
		>
		</el-input>
		<el-dialog
			v-model="dialogVisible"
			title="选择课程小节主题"
			width="30%"
			:before-close="handleClose"
		>
			<el-input v-model="filterText" placeholder="Filter keyword" />
			<el-tree
				:data="data"
				node-key="id"
				ref="tree"
				highlight-current
				:filter-node-method="filterNode"
				:props="defaultProps"
				@node-click="handleNodeClick"
			></el-tree>
			<template #footer>
				<span>
					<el-button @click="dialogVisible = false">取消</el-button>
					<el-button type="primary" @click="dialogVisible = false">确认</el-button>
				</span>
			</template>
		</el-dialog>
	</div>
</template>

<script lang="ts">
import { ElMessageBox } from "element-plus";
import { defineComponent, inject, onMounted, ref, watch,computed } from "vue";
import { isArray } from "/@/core/utils";
import { Search } from '@element-plus/icons'

export default defineComponent({
	name: "course",

	props: {
		modelValue: [String, Number, Array],
		props: Object
	},

	// props: {
	// 	value: {
	// 		type: String,
	// 	}
	// },

	emits: ["update:modelValue","click"],

	setup(props, { emit }) {
		// 请求服务
		const service = inject<any>("service");

		// 数据列表
		const list = ref<any[]>([]);

		// 绑定值
		const value = ref<any>();

		// 绑定值回调
		function onChange(val: any) {
			emit("update:modelValue", val);
		}

		const mineStatus = ref("");
		const mineStatusValue = ref([]);
		const defaultProps = ref({
			children: "children",
			label: "label"
		});

		computed(()=>{
			
		})

		const tree = ref(null);

		const selectChange = function (e) {
			var arrNew = [];
			var dataLength = this.mineStatusValue.length;
			var eleng = e.length;
			for (let i = 0; i < dataLength; i++) {
				for (let j = 0; j < eleng; j++) {
					if (e[j] === this.mineStatusValue[i].label) {
						arrNew.push(this.mineStatusValue[i]);
					}
				}
			}
			tree.value.setCheckedNodes(arrNew); //设置勾选的值
		};

		const handleCheckChange = function () {
			let res = tree.value.getCheckedNodes(true, true); //这里两个true，1. 是否只是叶子节点 2. 是否包含半选节点（就是使得选择的时候不包含父节点）
			let arrLabel = "";
			let arr = [];
			res.forEach((item) => {
				arrLabel = item.label;
				arr.push(item);
			});
			mineStatusValue.value = arr;
			mineStatus.value = arrLabel;
			console.log("arr:" + JSON.stringify(arr));
			console.log("arrLabel:" + arrLabel);
		};

		const selectValue = ref(null);

		// 定义对话框是否可见，默认关闭
		const dialogVisible = ref(false);

		const handleClose = (done) => {
			ElMessageBox.confirm("Are you sure to close this dialog?")
				.then(() => {
					done();
				})
				.catch(() => {
					// catch error
				});
		};

		const filterText = ref(null);

		const elOption = ref({
			value: 1,
			label: "1111"
		});

		const openDialog = (event) => {
      event.preventDefault();
			dialogVisible.value = true;

		};

		const data = ref([
			{
				id: 1,
				label: "Level one 1",
				children: [
					{
						id: 4,
						label: "Level two 1-1",
						children: [
							{
								id: 9,
								label: "Level three 1-1-1"
							},
							{
								id: 10,
								label: "Level three 1-1-2"
							}
						]
					}
				]
			},
			{
				id: 2,
				label: "Level one 2",
				children: [
					{
						id: 5,
						label: "Level two 2-1"
					},
					{
						id: 6,
						label: "Level two 2-2"
					}
				]
			},
			{
				id: 3,
				label: "Level one 3",
				children: [
					{
						id: 7,
						label: "Level two 3-1"
					},
					{
						id: 8,
						label: "Level two 3-2"
					}
				]
			}
		]);

		// const defaultProps = ref({
		// 	children: "children",
		// 	label: "label"
		// });

		const filterNode = function (value, data) {
			if (!value) return true;
			return data.label.indexOf(value) !== -1;
		};

		const handleNodeClick = (data,node,self) => {
      console.log(data);
      console.log(node);
      console.log(self);

      if (!data.children){
			let arr = [];
      arr.push({value:data.id,label:data.label})
			
			mineStatusValue.value = arr;
			mineStatus.value = data.id;
			// console.log(data);
			// mineStatusValue.value = data.id;
			// mineStatusValue.label = data.label;
			// selectValue.value = data.id;
      onChange(mineStatus.value)
			dialogVisible.value = false;
      }
		};

		// const tree = ref(null);

		// 解析值
		watch(
			() => props.modelValue,
			(val: any) => {
				mineStatus.value = (isArray(val) ? val : [val]).filter(Boolean);
			},
			{
				immediate: true
			}
		);

		// 解析值
		watch(
			() => filterText.value,
			(val: any) => {
				// console.log(tree);
				if (tree.value) {
					tree.value.filter(val);
				}
			},
			{
				immediate: true
			}
		);

		onMounted(async () => {
			console.log(service);

			list.value = await service.studentService.list();
			console.log(list.value);
		});

		return {
			list,
			value,
			onChange,
			dialogVisible,
			handleClose,
			defaultProps,
			data,
			filterText,
			filterNode,
			tree,
			handleNodeClick,
			elOption,
			openDialog,

			selectChange,
			handleCheckChange,
			mineStatusValue,
			mineStatus,
			Search
		};
	}
});
</script>
